<template>
    <view class="page">
      	<!-- <lime-painter  :postInfo="postInfo" /> -->
            <image
                :src="picture2"
                style="width: 500rpx; height:1083.3rpx;"
                mode="scaleToFill"
            />
            <l-painter css="width: 500rpx; height:1083.3rpx; " 
                custom-style="position: fixed; left: 200%"
                @fail="fail"
                @done="done"
                pathType="url"
                ref="poster"
                performance
            >
                <l-painter-image :src="postInfo.bg_img" css="width: 500rpx; height:1083.3rpx; position:absolute; "/>
                <l-painter-view   :css="`color:${dColor};position:absolute;top:419.2rpx;width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height:59.2rpx;line-height:59.2rpx;text-align:center`">
                    <l-painter-text :css="`font-size:${fontSize}rpx;font-weight:700`" :text="postInfo.store_one.name"/>
                </l-painter-view>
                <l-painter-text :text="postInfo.booth_no" :css="`position:absolute;top:490rpx;left:255.7rpx;color:${dColor};font-size:35.2rpx`"></l-painter-text>
                <l-painter-image :src="postInfo.qr_code_mini_url" css="width: 173.8rpx;height: 173.8rpx;position:absolute;top:620rpx;left:50%;transform: translateX(-50%); "/>
            </l-painter>
             <view class="save" :style="'background:'+ themeColors" @click="saveImage">保存到相册</view>
    </view>
</template>

<script>
export default {
   
    data: () => ({
        postInfo:{
                exhibit_one:{
                    start_time:'',
                    end_time:'',
                }
            },
        picture2: '',
        themeColors: uni.getStorageSync('color'),
        fontSize:25.6,
        show: false,
    }),
    mounted() {
        let num = this.postInfo.store_one.name.length
        if(num > 13){
            this.fontSize = 20.6
            let dValue = num - 13
            if( dValue > 7){
                this.fontSize = 25.6
                this.postInfo.store_one.name = this.postInfo.store_one.name.substr(0,12)+'...'
            }
        }
        this.$refs.poster.canvasToTempFilePathSync({
            fileType: 'jpg',
            quality: 1,
            success: (res) => {
                this.picture2 = res.tempFilePath
            }
        })
    },
    methods: {
        close() {
            this.show = false
        },
        fail(v) {
            console.log(v)
        },
        done(v) {
            console.log('绘制完成:',v)
        },
        save() {
            this.$refs.poster.canvasToTempFilePathSync({
                fileType: 'jpg',
                quality: 1,
                success: (res) => {
                    console.log(res.tempFilePath)
                    this.picture2 = res.tempFilePath
                    this.saveImage()
                },
                fail(e) {
                    console.log('???????????',e)
                }
            })
        },
        // 保存图征
        saveImage() {
            // #ifndef H5
            uni.saveImageToPhotosAlbum({
                filePath: this.picture2,
                success(res) {
                    uni.showToast({
                        title: '已保存到相册',
                        icon: 'success',
                        duration: 2000
                    });
                },
            });
            // #endif
        }
    }
};
</script>

<style lang="scss" scoped>
    .save{
        position: absolute;
        bottom: -110rpx;
        padding: 20rpx 36rpx;
        left: 50%;
        transform: translateX(-50%);
        color: #FFF;
        border-radius: 10rpx;
    }
</style>
